<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <f:view>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <title>Cita Médica</title>
            
            <link type="text/css" href="../common/css/redmond/jquery-ui-1.8.23.custom.css" rel="stylesheet" />

            <link type="text/css" href="../common/css/administrar.css" rel="stylesheet" />

            <link type="text/css" href="../common/css/jquery.contextMenu.css" rel="stylesheet" />

            <!--<script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
            <script type="text/javascript" src="../common/js/jquery.ui.all.js"></script>-->
            
            <script type="text/javascript" src="../common/js/jquery-1.8.0.min.js"></script>
            <script type="text/javascript" src="../common/js/jquery-ui-1.8.23.custom.min.js"></script>
            
            <!--<script type="text/javascript" src="../common/js/jquery.layout.js"></script>
            <script type="text/javascript" src="../common/js/jquery-ui-1.8.6.custom.min.js"></script>-->
            
            <!--<script type="text/javascript" src="../common/js/calendarioui-es.js"></script>
            <script type="text/javascript" src="../common/js/jquery.dateentry.js"></script>-->
            
            <script type="text/javascript" src="../common/js/citas.js"></script>
            <script type="text/javascript" src="../common/js/jquery.tablesorter.min.js"></script>
            <script type="text/javascript" src="../common/js/jquery.metadata.js"></script>
            <script type="text/javascript" src="../common/js/jquery.tablesorter.pager.js"></script>
            <script type="text/javascript" src="../common/js/jquery.validate.js"></script>
            <script type="text/javascript" src="../common/js/messages_es.js"></script>
            <script type="text/javascript" src="../common/js/jquery.contextMenu.js"></script>
            <script type="text/javascript" src="../common/js/jquery.qtip-1.0.0-rc3.js"></script>
            
            <style type="text/css" title="currentStyle">
                @import "../common/css/demo_page.css";			
                @import "../common/css/demo_table_jui.css";
            </style>
            <script type="text/javascript" language="javascript" src="../common/js/jquery.dataTables.js"></script>
            
            <!--<link type="text/css" href="../common/css/jquery-ui-timepicker-addon.css" rel="stylesheet" />
            <script type="text/javascript" src="../common/js/jquery-ui-timepicker-addon.js"></script>
            <script type="text/javascript" src="../common/js/jquery-ui-sliderAccess.js"></script>
            <script type="text/javascript" src="../common/js/calendarioui-es.js"></script>
            <script type="text/javascript" src="../common/js/timepicker-es.js"></script>-->
            

            <script>
               var asInitVals = new Array();

                $(document).ready(function() {
                
                
                
                            var oTable = $('#example').dataTable( {
                                            "sPaginationType": "full_numbers",
                                            "bJQueryUI": true,
                                            "bProcessing": true,
                                            "bServerSide": true,
                                            "bSortClasses": false,
                                            "sAjaxSource": "/salus/PacienteListaServlet",
                                            "oLanguage": {
                                                            "sLengthMenu": "Mostrar _MENU_ registros por Pagina",
                                                            "sZeroRecords": "Opps - No se encontraron datos",
                                                            "sInfo": "Mostrando _START_ a _END_ de _TOTAL_ registros",
                                                            "sInfoEmpty": "Mostrando 0 a 0 de 0 registros",
                                                            "sInfoFiltered": "(filtered from _MAX_ total records)"
                                                        }

                                    } );

                                    $("tfoot input").keyup( function () {
                                            /* Filter on the column (the index) of this element */
                                            oTable.fnFilter( this.value, $("tfoot input").index(this) );
                                    } );

                                   $("tfoot input").each( function (i) {
                                            asInitVals[i] = this.value;
                                    } );

                                    $("tfoot input").focus( function () {
                                            if ( this.className == "search_init" )
                                            {
                                                    this.className = "";
                                                    this.value = "";
                                            }
                                    } );

                                    $("tfoot input").blur( function (i) {
                                            if ( this.value == "" )
                                            {
                                                    this.className = "search_init";
                                                    this.value = asInitVals[$("tfoot input").index(this)];
                                            }
                                    } );                               
                                    $("#example tbody").dblclick(function(event) {
                                            $(oTable.fnSettings().aoData).each(function (){
                                                    $(this.nTr).removeClass('row_selected');
                                            });
                                            $(event.target.parentNode).addClass('row_selected');
                                            var anSelected = fnGetSelected( oTable );                                        
                                            var dato=anSelected[0].cells;                                        
                                            asignarCita(dato[0].innerHTML,dato[2].innerHTML+" "+dato[3].innerHTML+" "+dato[4].innerHTML+" "+dato[5].innerHTML,'',dato[1].innerHTML)
                                        
                                        
                                   });
                                    /* Add a click handler for the delete row */
                                    $('#delete').click( function() {
                                            var anSelected = fnGetSelected( oTable );
                                            //oTable.fnDeleteRow( anSelected[0] );
                                            var dato=anSelected[0].cells;
                                            alert(dato[0].innerHTML);
                                    } );
                                
                                
                                
                                    $('td', oTable.fnGetNodes()).hover( function() {
                                            var iCol = $('td').index(this) % 5;
                                            var nTrs = oTable.fnGetNodes();
                                            $('td:nth-child('+(iCol+1)+')', nTrs).addClass( 'highlighted' );
                                    }, function() {
                                            $('td.highlighted', oTable.fnGetNodes()).removeClass('highlighted');
                                    } );
 
                                
                            } );
                            
                            // for ( var i=0 ; i &lt; aTrs.length ; i++ )
                           /* Get the rows which are currently selected */
                function fnGetSelected( oTableLocal )
                        {
                                var aReturn = new Array();
                                var aTrs = oTableLocal.fnGetNodes();

                                for ( var i=0 ; i &lt; aTrs.length ; i++ )
                                {
                                        if ( $(aTrs[i]).hasClass('row_selected') )
                                        {
                                                aReturn.push( aTrs[i] );
                                        }
                                }
                                return aReturn;
                        }

            </script>



        </head>
        <body>

            <div style="width: 100%; text-align: center;">


                <h3 style="text-align: center" class="ui-widget-header">Citas M&eacute;dicas</h3>                                     
                <table width="100%">
                    <tr>
                        <td align="left">
                            <button id="agendaBtn">Consultar Agenda</button>               
                        </td>
                        <td align="right">
                            <button id="ayudaBtn">Ayuda</button>               
                        </td>
                    </tr>
                </table>                
                <div class="tooltips"></div>

                <!--DATA TABLE-->                
                <div id="dynamic">
                    <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
                        <thead>
                            <tr>
                                <th width="5%">Sec</th>
                                <th width="10%">Identificac&oacute;n</th>
                                <th width="20%">Primer Nombre</th>
                                <th width="20%">Segundo Nombre</th>
                                <th width="20%">Primer Apellido</th>
                                <th width="20%">Segundo Apellido</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="3" class="dataTables_empty">Loading data from server</td>
                            </tr>
                        </tbody>

                        <tfoot>
                            <tr>                                
                                <th><input size="20" type="hidden" name="search_id" value="Secuencial" class="search_init" /></th>
                                <th><input type="text" onkeyup="this.value=this.value.toUpperCase()" name="search_numero" value="Numero" class="search_init" /></th>
                                <th><input type="text" onkeyup="this.value=this.value.toUpperCase()" name="search_nombre1" value="Primer Nombre" class="search_init" /></th>
                                <th><input type="text" onkeyup="this.value=this.value.toUpperCase()" name="search_nombre2" value="Segundo Nombre" class="search_init" /></th>
                                <th><input type="text" onkeyup="this.value=this.value.toUpperCase()" name="search_apellido1" value="Primer Apellido" class="search_init" /></th>
                                <th><input type="text" onkeyup="this.value=this.value.toUpperCase()" name="search_apellido2" value="Segundo Apellido" class="search_init" /></th>
                            </tr>
                        </tfoot>



                    </table>
                </div>

                <!--
                <div style="width: 100%" id="buscador-form">
                    <table border="0" >
                        <tr valign="top" class="ui-widget-header">
                            <td>Identificaci&oacute;n</td>
                            <td><input type="text" size="16" id="buscarCod" class="text ui-widget-content ui-corner-all"/></td>
                            <td>Nombres</td>
                            <td><input type="text" size="20" onkeyup="this.value=this.value.toUpperCase()" id="buscarDes" class="text ui-widget-content ui-corner-all"/></td>
                            <td>Apellidos</td>
                            <td><input type="text" size="20" onkeyup="this.value=this.value.toUpperCase()" id="buscarDes1" class="text ui-widget-content ui-corner-all"/></td>
                            <td><button id="buscarBtn">Buscar</button></td>
                            <td><button id="clearBtn">Limpiar</button></td>
                            <td align="right"> 
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <button id="agendaBtn">Agenda</button>
                            </td>
                        </tr>
                    </table>
                </div>
                <div id="lista-pacientes"></div>
                -->





            </div>

            <div id="citas-form" title="Info" style="display: none">                
            </div>

            <div class="qtip qtip-stylename">
                <div class="qtip-tip" rel="cornerValue"></div>
                <div class="qtip-wrapper">
                    <div class="qtip-borderTop"></div>
                    <div class="qtip-contentWrapper">
                        <div class="qtip-title">
                            <div class="qtip-button"></div>
                        </div>
                        <div class="qtip-content"></div>
                    </div>
                    <div class="qtip-borderBottom"></div>
                </div>
            </div>



        </body>
    </f:view>
</html>